<html>
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <style>
        /*@charset "utf-8";*/
        * {
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #1F1F1F;
        }

        .image-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            width: 600px;
            grid-gap: 0.5rem;
        }

        .image-container .image {
            position: relative;
            padding-bottom: 100%;
        }

        .image-container .image img {
            height: 100%;
            width: 100%;
            -o-object-fit: cover;
            object-fit: cover;
            left: 0;
            position: absolute;
            top: 0;
        }

        .image-container .image img:nth-of-type(1) {
            filter: grayscale(1) brightness(40%);
        }

        .image-container .image img:nth-of-type(2) {
            -webkit-clip-path: var(--clip-start);
            clip-path: var(--clip-start);
            transition: -webkit-clip-path 0.5s;
            transition: clip-path 0.5s;
            transition: clip-path 0.5s, -webkit-clip-path 0.5s;
        }

        .image-container .image:hover img:nth-of-type(2) {
            -webkit-clip-path: var(--clip-end);
            clip-path: var(--clip-end);
        }
    </style>

</head>
<body>

<div class="image-container">
    <div class="image" style="--clip-start: ellipse(0 0 at 0 0); --clip-end: ellipse(150% 150% at 0 0);">
        <a href="#"><img src="img/搏击体能.jpg"><img src="img/搏击体能.jpg"></a>
    </div>
    <div class="image" style="--clip-start: inset(100% 0 0 0); --clip-end: inset(0 0 0 0);">
        <a href="#"><img src="img/huaxue.jpg"><img src="img/huaxue.jpg"></a>
    </div>
    <div class="image" style="--clip-start: ellipse(0 0 at 100% 0); --clip-end: ellipse(150% 150% at 100% 0);">
        <a href="#"><img src="img/篮球.jpg"><img src="img/篮球.jpg"></a>
    </div>
    <div class="image"
         style="--clip-start: polygon(50% 50%,  50% 50%,  50% 50%, 50% 50%); --clip-end: polygon(-50% 50%, 50% -50%, 150% 50%, 50% 150%);">
        <a href="#"><img src="img/keep.jpg"><img src="img/keep.jpg"></a>
    </div>
    <div class="image" style="--clip-start: circle(0); --clip-end: circle(125%);">
        <a href="tologin1.action"><img src="img/login2.png"><img src="img/login1.png"></a>
    </div>
    <div class="image" style="--clip-start: inset(100% 100% 100% 100%); --clip-end: inset(0 0 0 0);">
        <a href="#"><img src="img/moving.jpg"><img src="img/moving.jpg"></a>
    </div>
    <div class="image" style="--clip-start: ellipse(0 0 at 0 100%); --clip-end: ellipse(150% 150% at 0 100%);">
        <a href="#"><img src="img/panyan.jpg"><img src="img/panyan.jpg"></a>
    </div>
    <div class="image" style="--clip-start: inset(0 0 100% 0); --clip-end: inset(0 0 0 0);">
        <a href="#"><img src="img/kupao.jpg"><img src="img/kupao.jpg"></a>
    </div>
    <div class="image" style="--clip-start: ellipse(0 0 at 100% 100%); --clip-end: ellipse(150% 150% at 100% 100%);">
        <a href="#"><img src="img/足球.jpg"><img src="img/足球.jpg"></a>

    </div>
</div>
</body>
</html>
